<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" title="盘点" width="50%" append-to-body>

      <div>基本信息</div>
      <el-form ref="baseForm" :model="baseForm" label-width="100">
        <el-form-item label="名称" prop="title">
          <el-input v-model="baseForm.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="盘点人" prop="userId">
          <user-select  v-model="baseForm.userId" placeholder="请输入"></user-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="baseForm.remark" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div>盘点范围</div>

      <el-form ref="rangeForm" :model="rangeForm" label-width="100">
        <el-row>
          <el-col :span="12">
            <el-form-item label="类别" prop="title">
              <category-select v-model="rangeForm.categoryId" placeholder="请输入"></category-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库" prop="warehouseId">
              <warehouse-select v-model="rangeForm.warehouseId" placeholder="请输入"></warehouse-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-row>

      </div>
    </el-dialog>

    <choose-dialog ref="chooseDialog" @sub="onChooseSub"></choose-dialog>

  </div>
</template>

<script>

import api from "./api.js";
import UserSelect from "@/components/User/UserSelect.vue";
import ChooseDialog from "@/components/Asset/ChooseDialog.vue";
import CategorySelect from "@/components/Asset/CategorySelect.vue";
import WarehouseSelect from "@/components/Warehouse/WarehouseSelect.vue";




export default {
  components: {WarehouseSelect, CategorySelect, ChooseDialog, UserSelect, },
  props: {
  },
  data() {
    return {
      openFlag: false,
      tableData: {
        loading: false,
        list: []
      },
      // 用来存被删除的资产的数组
      deletedItem: [],
      currentRow: null,
      isEdit: false,
      actionType: '',
      // 表单参数
      baseForm: {
        id: null,
        configId: null,
        number: null,
        name: null,
        categoryId: null,
        categoryName: null,
        rfid: null,
        brand: null,
        model: null,
        buyWay: null,
        buyTime: null,
        buyPrice: null,
        adminId: null
      },
      rangeForm: {
        categoryId: null,
        warehouseId: null,
      }
    }
  },
  methods: {
    open({actionType, row}) {
      this.openFlag = true;
      this.reset();
      this.actionType = actionType;
      if (actionType === 'edit') {
        api.detail(row).then(response=> {
          Object.assign(this.form, response);
          this.tableData.list = response.items;
        })
      }
    },
    close() {
      this.openFlag = false;
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.close();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: null,
        number: null,
        name: null,
        categoryId: null,
        categoryName: null,
        rfid: null,
        brand: null,
        model: null,
        buyWay: null,
        buyTime: null,
        buyPrice: null,
        adminId: null
      };
    },
    handleChoose() {
      this.$refs.chooseDialog.open();
    },
    handleDelete({ row, $index }) {
      // 如果是编辑状态需要把删除的行存起来
      if (this.actionType === 'edit') {
        this.deletedItem.push(row);
      }
      this.tableData.list.splice($index, 1);
    },
    /** 提交按钮 */
    save: function () {
      const params = {
        baseForm: this.baseForm,
        rangeForm: this.rangeForm
      };
      api.save(params).then(response => {
        this.$emit("sub");
        this.close();
      });
    },
    onChooseSub: function(selected) {
      if (selected) {
        selected.forEach((item)=> {
          let row = {...item};
          row.sourceId = row.id;
          delete row.id;
          this.tableData.list.push(row);
        })
      }
    }
  },

}


</script>

